<div class="detail">
	<div class="main">
		<div class="title">
			<div class="tile"></div>
			{{goods_detail.goods_name}}
		</div>
		{{#> "goodsimgview"}}
	</div>
	
    <div class="sharebox">
        直接分享到：
        <i class="icon-sina-weibo" event-click="{{'$Event.shareToWeibo'}}"></i>
        <i class="icon-qq" event-click="{{'$Event.shareQzone'}}"></i>
    </div>
    <div class="sharebox">
        复制链接分享：<a class="open" event-click="{{'$Event.open_href'}}">{{$href_open&&'点击收起'||'点击展开'}}</a class="open">
        <div class="href {{$href_open&&'focus'}}">
            {{bus_info.info.domain_url+"/catering.mobile.html#default/detail?id="+goods_detail._id+"&rcid="+loginer._id}}
        </div>
    </div>
    <div class="sharebox">
        <div id="qrcode"></div>
    </div>
	<div class="info">
		{{#if goods_detail.intro}}
            {{goods_detail.intro}}
        {{#else}}
		暂无描述
		{{/if}}
	</div>
	
	<div class="cartbox">
		<div class="price">
			￥<span>{{goods_detail.price_toFixed_2}}</span>
		</div>
		<div class="icon-cart2" event-click="{{#if goods_detail.num }}{{'$Event.goods.add_to_cart'}}{{/if}}">
			{{#if goods_detail.num }}
			加入购物车
			{{#else}}
			暂时缺货
			{{/if}}
		</div>
	</div>
</div>


<xmp type="template" name="goodsimgview">
    <div class="goodsimg">
        <div class="bigbox">
            <div class="movebox">
                {{#if goods_detail.detail_img_urls.length}}
                {{#each goods_detail.detail_img_urls}}
                <img class="bigimg" bind-src="{{$This}}?imageView/1/w/500" />
                {{/each}} {{#else}}
                <img class="bigimg" bind-src="{{goods_detail.preview_img_url||'/images/imgerror.jpg'}}?imageView/1/h/500/w/500" />
                {{/if}}
            </div>
        </div>
        <div class="smallbox">
            {{#if goods_detail.detail_img_urls.length}} {{#each goods_detail.detail_img_urls }}
            <img name="{{$Index}}" class="smallimg" bind-src="{{$This}}?imageView/1/w/50/h/50" />{{/each}} {{#else}}此商品卖家没有上传图片{{/if}}
        </div>
    </div>
    <script type="text/vm">
        function(vm) {
            var movebox = vm.queryElement({
                className: "movebox"
            })[0];
			var bigbox= vm.queryElement({
				className: "bigbox"
			})[0];
            var smallbox = vm.queryElement({
                className: "smallbox"
            })[0];
            require(['jQuery'], function() {
                var $movebox = $(movebox);
				var $bigbox=$(bigbox);
				var width=$bigbox.width();
				$bigbox.css("height",width+"px");
                $(smallbox).on("click", "img", function() {
                    var w = $movebox.width();
                    $movebox.stop().animate({
                        marginLeft: -w * $(this).attr('name')
                    }, 350);
                });
            });
        }
    </script>
</xmp>
<link rel="stylesheet" type="text/css" href="/css/catering/mobile_detail.css" />